<template>
    <div class="text-group">
        <!-- 组件结构 -->
        <!-- 组件容器 -->
        <div class="input_group" :class="{'is-invalid':error}">
            <!-- 输入框:里面的动态属性是调用方传递的 -->
            <input :type="type" :value='value' :placeholder='placeholder' :name='name' 
            @click="$emit('input',$event.target.value)" @input="$emit('input',$event.target.value)">
        </div>
        <!-- 错误提醒 -->
        <div v-if='error' class="invalid-feedback">{{error}}</div>
      <router-view/>
    </div>
  </template>

<script>
    export default {
        name: 'inputGroup',
        //重复利用的组件，哪里需要调用这个组件就要去哪里传递参数，
        props: {
            type: {
                type: String,
                default: 'text'
            },
            value: String, //input当中绑定的值
            placeholder: String, //对应的提醒
            name: String,
            btnTitle: String, //拥不拥有“获取验证码”
            disabled: Boolean, //决定按钮可用或不可用
            error: String //判断是否错误来进行提醒
        }
    }
</script>
<style scoped>
    .input_group {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    .input_group input {
        height: 100%;
        width: 60%;
        outline: none;
    }
    
    .input_group button {
        border: none;
        outline: none;
        background: #fff;
    }
    
    .input_group button[disabled] {
        color: #aaa;
    }
    
    .is-invalid {
        border: 1px solid red;
    }
    
    .invalid-feedback {
        color: red;
        padding-top: 5px;
    }
</style>